<template>
  <!-- 审核弹窗 -->
  <el-dialog v-model="delCenterDialogVisible" title="审核" width="1200" destroy-on-close center @close="closeDialog">
    <div class="container">
      <!-- 主体内容区 -->
      <div class="context">
        <!-- 使用 el-tabs 实现标签页切换 -->
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <!-- 基本信息 -->
          <el-tab-pane label="基本信息" name="first">
            <el-descriptions title="基本信息" :column="5" :size="size" direction="vertical" :style="blockMargin" border>
              <el-descriptions-item label="出生年月" :span="1">{{ formState.basicInfo.dateOfBirth }}</el-descriptions-item>
              <el-descriptions-item label="血型" :span="1">{{ formState.basicInfo.bloodType }}</el-descriptions-item>
              <el-descriptions-item label="身高">{{ formState.basicInfo.heightInCm }}</el-descriptions-item>
              <el-descriptions-item label="体重（千克）">
                {{ formState.basicInfo.weightInKg }}
              </el-descriptions-item>
              <el-descriptions-item label="眼睛颜色">
                {{ formState.basicInfo.eyeColor }}
              </el-descriptions-item>
              <el-descriptions-item label="发色">
                {{ formState.basicInfo.hairColor }}
              </el-descriptions-item>
              <el-descriptions-item label="种族">
                {{ formState.basicInfo.ethnicity }}
              </el-descriptions-item>
              <el-descriptions-item label="学历">
                {{ formState.basicInfo.education }}
              </el-descriptions-item>
              <el-descriptions-item label="职业">
                {{ formState.basicInfo.occupation }}
              </el-descriptions-item>
              <el-descriptions-item label="健康状况">
                {{ formState.basicInfo.healthStatus }}
              </el-descriptions-item>
              <el-descriptions-item label="学校名称及专业">
                {{ formState.basicInfo.schoolNameMajor }}
              </el-descriptions-item>
              <el-descriptions-item label="学科成绩（GPA)">
                {{ formState.basicInfo.gpa }}
              </el-descriptions-item>
              <el-descriptions-item label="其它特长">
                {{ formState.basicInfo.otherExpertise }}
              </el-descriptions-item>
              <el-descriptions-item label="婚姻状况">
                {{ formState.basicInfo.maritalStatus }}
              </el-descriptions-item>
              <el-descriptions-item label="运动习惯">
                {{ formState.basicInfo.exerciseHabit }}
              </el-descriptions-item>
              <el-descriptions-item label="性格特点" :span="5">
                {{ formState.basicInfo.personalityDescription }}
              </el-descriptions-item>
              <el-descriptions-item label="是否做过整形">
                {{ formState.basicInfo.hadPlasticSurgery }}
              </el-descriptions-item>
              <el-descriptions-item label="是否有捐赠经验">
                {{ formState.basicInfo.eggDonorExperience }}
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>

          <!-- 医疗背景 -->
          <el-tab-pane label="医疗背景" name="second">
            <el-descriptions title="医疗背景" :column="5" :size="size" direction="vertical" :style="blockMargin" border>
              <el-descriptions-item label="想当捐卵者的原因" :span="1">{{ formState.medicalInfo.reasonToBeSpermDonor }}</el-descriptions-item>
              <el-descriptions-item label="最喜欢的食物" :span="1">{{ formState.medicalInfo.favoriteFood }}</el-descriptions-item>
              <el-descriptions-item label="家庭成长感受">{{ formState.medicalInfo.familyGrowthFeeling }}</el-descriptions-item>
              <el-descriptions-item label="最喜欢的运动">
                {{ formState.medicalInfo.favoriteSport }}
              </el-descriptions-item>
              <el-descriptions-item label="特殊才能与技能">
                {{ formState.medicalInfo.specialTalentsSkills }}
              </el-descriptions-item>
              <el-descriptions-item label="最喜欢的书及原因" :span="5">
                {{ formState.medicalInfo.favoriteBookReason }}
              </el-descriptions-item>
              <el-descriptions-item label="最不喜欢的事">
                {{ formState.medicalInfo.dislikes }}
              </el-descriptions-item>
              <el-descriptions-item label="人生目标与抱负">
                {{ formState.medicalInfo.lifeGoalAmbition }}
              </el-descriptions-item>
              <el-descriptions-item label="是否收养子女">
                {{ formState.medicalInfo.isAdopted }}
              </el-descriptions-item>
              <el-descriptions-item label="亲属关系">
                {{ formState.medicalInfo.relative }}
              </el-descriptions-item>
              <el-descriptions-item label="是否有听力问题">
                {{ formState.medicalInfo.hearingProblems }}
              </el-descriptions-item>
              <el-descriptions-item label="是否吸烟">
                {{ formState.medicalInfo.smoking }}
              </el-descriptions-item>
              <el-descriptions-item label="是否有精神问题">
                {{ formState.medicalInfo.psychiatricCare }}
              </el-descriptions-item>
              <el-descriptions-item label="是否近视">
                {{ formState.medicalInfo.nearsightedness }}
              </el-descriptions-item>
              <el-descriptions-item label="是否做过近视矫正手术">
                {{ formState.medicalInfo.laserSurgery }}
              </el-descriptions-item>
              <el-descriptions-item label="牙齿问题描述" :span="5">
                {{ formState.medicalInfo.dentalProblems }}
              </el-descriptions-item>
              <el-descriptions-item label="是否有过重大疾病">
                {{ formState.medicalInfo.majorIllness }}
              </el-descriptions-item>
              <el-descriptions-item label="住院或手术描述" :span="5">
                {{ formState.medicalInfo.hospitalizationSurgeries }}
              </el-descriptions-item>
              <el-descriptions-item label="是否有慢性病">
                {{ formState.medicalInfo.chronicConditions }}
              </el-descriptions-item>
              <el-descriptions-item label="是否有性病">
                {{ formState.medicalInfo.sexuallyTransmittedDiseases }}
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>

          <!-- 生殖资料 -->
          <el-tab-pane label="生殖资料" name="third">
            <el-descriptions title="生殖资料" :column="5" :size="size" direction="vertical" :style="blockMargin" border>
              <el-descriptions-item label="最近一次看妇科时间及结果？" :span="2">{{
                formState.menstrualInfo.lastAndrologyVisitDate
              }}</el-descriptions-item>
              <el-descriptions-item label="最后一次宫颈抹片的时间及结果？" :span="3">{{ formState.menstrualInfo.papSmearDate }}</el-descriptions-item>
              <el-descriptions-item label="是否曾经怀孕过，如果有，几次？" :span="2">{{
                formState.menstrualInfo.previousPregnancies
              }}</el-descriptions-item>
              <el-descriptions-item label="目前如何避孕？" :span="3">
                {{ formState.menstrualInfo.contraceptionMethod }}
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>

          <!-- 家庭信息 -->
          <el-tab-pane label="家庭信息" name="fourth">
            <el-table :data="formState.familyList" border style="width: 100%">
              <el-table-column prop="relative" label="收养关系" width="180" />
              <el-table-column prop="isAdopted" label="血缘关系" width="180" />
              <el-table-column prop="age" label="年龄" width="180" />
              <el-table-column prop="height" label="身高" width="180" />
              <el-table-column prop="weight" label="体重" />
              <el-table-column prop="race" label="种族" width="180" />
              <el-table-column prop="hairColor" label="发色" width="180" />
              <el-table-column prop="eyeColor" label="瞳色" />
              <el-table-column prop="occupation" label="职业" width="180" />
              <el-table-column prop="healthStatus" label="健康" width="180" />
              <el-table-column prop="education" label="学历" />
            </el-table>
          </el-tab-pane>

          <!-- 开放式问题 -->
          <el-tab-pane label="开放式问题" name="five">
            <el-descriptions title="开放式问题" :column="5" :size="size" direction="vertical" :style="blockMargin" border>
              <el-descriptions-item label="是否旅游到任何地方" :span="2">{{ formState.openQuestions.hasTravelAnywhere }}</el-descriptions-item>
              <el-descriptions-item label="生活信条" :span="2">{{ formState.openQuestions.lifeMotto }}</el-descriptions-item>
              <el-descriptions-item label="最喜欢音乐人" :span="1">{{ formState.openQuestions.favoriteMusicArtist }}</el-descriptions-item>
              <el-descriptions-item label="在你家里成长是什么感觉" :span="2">
                {{ formState.openQuestions.favoriteSport }}
              </el-descriptions-item>
              <el-descriptions-item label="您最不喜欢什么" :span="2">
                {{ formState.openQuestions.dislikes }}
              </el-descriptions-item>
              <el-descriptions-item label="您的人生终极目标和抱负" :span="1">
                {{ formState.openQuestions.lifeGoalAmbition }}
              </el-descriptions-item>
              <el-descriptions-item label="您最喜欢的食物是什么" :span="2">
                {{ formState.openQuestions.favoriteFood }}
              </el-descriptions-item>
              <el-descriptions-item label="您为什么想成为捐卵者" :span="2">
                {{ formState.openQuestions.reasonToBeEggDonor }}
              </el-descriptions-item>
              <el-descriptions-item label="描述您有什么特殊才能、技能、爱好和兴趣" :span="1">
                {{ formState.openQuestions.specialTalentsSkills }}
              </el-descriptions-item>
              <el-descriptions-item label="您最喜欢的书及原因" :span="5">
                {{ formState.openQuestions.favoriteBooks }}
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>

          <!-- 捐赠历史 -->
          <el-tab-pane label="捐赠历史" name="six">
            <el-table :data="formState.historyList" border style="width: 100%">
              <el-table-column prop="donationDate" label="捐精日期" width="180" />
              <el-table-column prop="donationHospitalCountry" label="捐赠医院/国家" width="180" />
              <el-table-column prop="address" label="精子质量评估(A+B)" />
              <el-table-column prop="pgsPassed" label="是否经过遗传筛查" />
            </el-table>
          </el-tab-pane>

          <!-- 基因报告 -->
          <el-tab-pane label="基因报告" name="seven">基因报告</el-tab-pane>

          <!-- 个人照片 -->
          <el-tab-pane label="个人照片" name="eight">个人照片</el-tab-pane>

          <!-- 个人视频 -->
          <el-tab-pane label="个人视频" name="nine">个人视频</el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 底部按钮区 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateStatus(formState, 2)">审核不通过</el-button>
        <el-button type="primary" @click="updateStatus(formState, 1)">审核通过</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, watch } from 'vue';
import type { TabsPaneContext } from 'element-plus';
import { eggdonorsDetail } from '@/api/business/questionnaire/egg-donors';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

// 定义事件
const emits = defineEmits(['closeDialog']);
const router = useRouter();
// 定义属性
const props = defineProps({
  visiable: {
    type: Boolean,
    required: true,
    default: false
  },
  donorId: {
    type: String,
    required: true,
    default: ''
  }
});

const route = useRoute();

// 当前激活的标签页
const activeName = ref('first');

// 控制弹窗显隐
const delCenterDialogVisible = ref(false);

// 标签页点击事件
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};

// 描述列表尺寸
const size = ref('large');

// 计算描述列表的外边距样式
const blockMargin = computed(() => {
  const marginMap = {
    large: '32px',
    default: '28px',
    small: '24px'
  };
  return {
    marginTop: marginMap[size.value] || marginMap.default
  };
});

// 表单数据
const formState = ref({
  username: '',
  password: '',
  isAdopted: '',
  basicInfo: { donorId: '' },
  medicalInfo: {},
  openQuestions: {},
  historyList: [
    {
      donation_date: '',
      donationHospitalCountry: '',
      eggCount: null,
      pgsPassed: ''
    },
    {
      donation_date: '',
      donationHospitalCountry: '',
      eggCount: null,
      pgsPassed: ''
    },
    {
      donation_date: '',
      donationHospitalCountry: '',
      eggCount: null,
      pgsPassed: ''
    },
    {
      donation_date: '',
      donationHospitalCountry: '',
      eggCount: null,
      pgsPassed: ''
    }
  ],
  menstrualInfo: {},
  familyList: [
    {
      relation: 'father',
      relative: '父亲',
      age: '',
      height: '',
      weight: '',
      race: '',
      hairColor: '',
      eyeColor: '',
      occupation: '',
      healthStatus: '',
      education: ''
    },
    {
      relation: 'mother',
      relative: '母亲',
      age: '',
      height: '',
      weight: '',
      race: '',
      hairColor: '',
      eyeColor: '',
      occupation: '',
      healthStatus: '',
      education: ''
    },
    {
      relation: 'grandfather',
      relative: '祖父',
      age: '',
      height: '',
      weight: '',
      race: '',
      hairColor: '',
      eyeColor: '',
      occupation: '',
      healthStatus: '',
      education: ''
    },
    {
      relation: 'grandmather',
      relative: '祖母',
      age: '',
      height: '',
      weight: '',
      race: '',
      hairColor: '',
      eyeColor: '',
      occupation: '',
      healthStatus: '',
      education: ''
    },
    {
      relation: 'mgrandfather',
      relative: '外祖父',
      age: '',
      height: '',
      weight: '',
      race: '',
      hairColor: '',
      eyeColor: '',
      occupation: '',
      healthStatus: '',
      education: ''
    },
    {
      relation: 'mgrandmather',
      relative: '外祖母',
      age: '',
      height: '',
      weight: '',
      race: '',
      hairColor: '',
      eyeColor: '',
      occupation: '',
      healthStatus: '',
      education: ''
    },
    {
      relation: 'brosister',
      relative: '兄弟姐妹',
      age: '',
      height: '',
      weight: '',
      race: '',
      hairColor: '',
      eyeColor: '',
      occupation: '',
      healthStatus: '',
      education: ''
    },
    {
      relation: 'brosister',
      relative: '兄弟姐妹',
      age: '',
      height: '',
      weight: '',
      race: '',
      hairColor: '',
      eyeColor: '',
      occupation: '',
      healthStatus: '',
      education: ''
    }
  ]
});

// 当前编辑的捐赠者ID
const basicId = ref();

// 更新审核状态
// const updateStatus = (data, status) => {
//   data.sysUser.shzt = status;
//   shenheUser(data.sysUser).then((res) => {
//     ElMessage.success('审核成功');
//   });
// };

// 获取捐赠者详情
const getEggdonorsDetail = async (id: string) => {
  await eggdonorsDetail(id).then((res) => {
    console.log(res, 'eggdonorsDetail');
    formState.value = {
      basicInfo: res.basicInfo || {},
      email: res.email,
      familyList: res.familyList || [],
      historyList: res.historyList || [],
      isAdopted: res.isAdopted,
      medicalInfo: res.medicalInfo || {},
      menstrualInfo: res.menstrualInfo || {},
      name: res.name,
      openQuestions: res.openQuestions || {},
      password: res.password,
      photoList: res.photoList || [],
      photoUrls: res.photoUrls || [],
      sysUser: res.sysUser || {},
      userId: res.userId,
      username: res.sysUser?.userName
    };
  });
};

// 关闭弹窗
function closeDialog() {
  emits('closeDialog');
}

// 监听父组件传递的可见性变化
watch(
  () => props.visiable,
  (val) => {
    delCenterDialogVisible.value = val;
    if (val) {
      basicId.value = props.donorId;
      getEggdonorsDetail(basicId.value);
    }
  },
  {
    deep: true,
    immediate: true
  }
);

// 组件挂载后初始化
onMounted(() => {});
</script>

<style lang="scss" scoped>
// 标签页内容样式
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

// 容器样式
.container {
  margin: 15px;
}

// 操作区样式
.operation {
  display: flex;
  justify-content: space-between;
  .left {
    display: flex;
    .one,
    .two,
    .three {
      display: flex;
    }
  }
}

// 内容区样式
.context {
  margin: 20px;
}
</style>
